<!doctype html>
<html>
<head>
    <!-- 声明文档使用的字符编码 -->
    <meta charset='utf-8'>
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 页面描述 -->
    <meta name="description" content="不超过150个字符"/>
    <!-- 页面关键词 -->
    <meta name="keywords" content=""/>
    <!-- 网页作者 -->
    <meta name="author" content="guo,1057540638@qq.com"/>
    <!-- 搜索引擎抓取 -->
    <meta name="robots" content="index,follow"/>
    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=3,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
    <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->

    <!-- iOS 设备 begin -->
    <meta name="apple-mobile-web-app-title" content="标题">
    <!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->

    <!--meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" -->
    <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- 设置苹果工具栏颜色 -->
    <meta name="format-detection" content="telphone=no, email=no"/>
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->

    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 不让百度转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- iOS 图标 begin -->
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
    <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
    <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
    <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
    <!-- iOS 图标 end -->

    <!-- iOS 启动画面 begin -->
    <link rel="apple-touch-startup-image" sizes="768x1004" href="img/App-ios-logo-152x152.png"/>
    <!-- iPad 竖屏 768 x 1004（标准分辨率） -->
    <link rel="apple-touch-startup-image" sizes="1536x2008" href="img/App-ios-logo-152x152.png"/>
    <!-- iPad 竖屏 1536x2008（Retina） -->
    <link rel="apple-touch-startup-image" sizes="1024x748" href="img/App-ios-logo-152x152.png"/>
    <!-- iPad 横屏 1024x748（标准分辨率） -->
    <link rel="apple-touch-startup-image" sizes="2048x1496" href="img/App-ios-logo-152x152.png"/>
    <!-- iPad 横屏 2048x1496（Retina） -->

    <link rel="apple-touch-startup-image" href="img/App-ios-logo-152x152.png"/>
    <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
    <link rel="apple-touch-startup-image" sizes="640x960" href="img/App-ios-logo-152x152.png"/>
    <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
    <link rel="apple-touch-startup-image" sizes="640x1136" href="img/App-ios-logo-152x152.png"/>
    <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
    <!-- iOS 启动画面 end -->

    <!-- iOS 设备 end -->
    <meta name="msapplication-TileColor" content="#000"/>
    <!-- Windows 8 磁贴颜色 -->
    <meta name="msapplication-TileImage" content="icon.png"/>
    <!-- Windows 8 磁贴图标 -->

    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
    <!-- 添加 RSS 订阅 -->
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
    <!-- 添加 favicon icon -->
    <!-- sns 社交标签 begin -->
    <!-- 参考微博API -->
    <meta property="og:type" content="类型" />
    <meta property="og:url" content="URL地址" />
    <meta property="og:title" content="标题" />
    <meta property="og:image" content="图片" />
    <meta property="og:description" content="描述" />
    <!-- sns 社交标签 end -->
    <title>产品详情</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">

    <!-- banner -->
    <link rel="stylesheet" href="css/swiper.min.css">
    <style type="text/css">
        .swiper-slide a img {
            width: 100%;
        }
        .swiper-pagination-bullet {
            background: #BCBCBC;
            opacity: 0.5;
        }
        .swiper-pagination-bullet-active {
            background: #FF9F00;
            opacity: 0.8;
        }
        .main-container a.ckbigimg{ background-color:rgba(120,120,120,1); font-size: .7rem;color:#fff !important;padding:.2rem 0;    margin-left: auto;
            margin-right: auto; width:100%; height:100%;
            text-align: center; display: block; margin-top: -1.1rem; z-index: 9999; position: relative;}
        .list-title{ background-color:#fff; margin-top:0; top:0;
            clear: both;}
        .list div span.guige{  display: block;  float: right;  top:0.7rem;  line-height:1.2rem;  color: rgba(0, 0, 0, .75);
            font-size: .7rem;  font-weight:bold;  }
        .list div{
            margin:0 1rem 0 1rem;  line-height:1.2rem; font-size:.8rem; padding: .7rem .1rem .7rem .3rem; border:none;
        }
        .buy{ border-bottom:1px solid #f0f0f0; height:2rem; padding:1.5rem 0 .8rem 0;}
        .list-title div.goumai,.list-title div.gouwuche { width:50%; margin:0;padding:0; height:2.2rem; float:left;display:block; text-align: center;}
        .list-title div.goumai a,.list-title div.gouwuche a{  padding:.5rem 1.5rem; color:#fff; line-height: 1.2rem; text-align: center;border-radius: .2rem; }
        .list-title div.goumai a{ background-color:#E94A4A;}
        .list-title div.gouwuche a{ background-color:#E66F08;}
        .list div.gray{  background-color: #f2f2f2 !important; margin:0; padding:.7rem 1.1rem .7rem 1.3rem;
            font-weight:bold;  }
        .list div.proname{  font-weight:bold; padding-bottom:.2rem;}
        .list div.instruc{ line-height: 1.1rem; color:#999; font-size:.7rem;
            padding-bottom:.3rem; padding-top: .2rem;}
        .gray a i.icon-arrowright{ color:#333;
            float: right;}
        .icon-cart{ font-size:1rem;}
        .list-title div.storeinfo{  height:2.3rem; overflow: hidden;padding:1rem 0;}
        .price{ float:right; color:#E94A4A; font-weight:bold; line-height: 2.2rem;}
        .storeinfo .storeimg{ width:2.2rem; heigth:2.2rem; line-height: 1.2rem;
            float: left;
            bottom:-.5rem;
            -webkit-border-radius:50%;
            -moz-border-radius:50%;
            border-radius:50%;
        }
        .list div.storename{
            float: left;
            margin-left:0;}
        .storename p{
            line-height:1rem;display:inline-block; margin-top:-.5rem;top:-.5rem; position:relative; padding-left:.3rem;}
        .storename p.storename_0{ line-height: 1.2rem;
            display: block;}
        .storename p.loction{ line-height: 1.0rem; font-size: .7rem;}
        .shuoming ul{ padding-left:1rem;}
        .shuoming ul li{ }
        .shuoming .line h3{ text-align: center;}
    </style>
</head>

<body ontouchstart="return true;">
<!--内容区-->
<article class="main-container">
    <div class="swiper-container" id="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><A href=""><img src="img/Pic13.jpg" /></A></div>
            <div class="swiper-slide"><A href=""><img src="img/Pic14.jpg" /></A></div>
            <div class="swiper-slide"><A href=""><img src="img/Pic15.jpg" /></A></div>
            <div class="swiper-slide"><A href=""><img src="img/Pic16.jpg" /></A></div>
            <div class="swiper-slide"><A href=""><img src="img/Pic17.jpg" /></A></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
    <a class="ckbigimg">点击查看商品图片</a>

    <div class="list list-title line">
        <div class="proname">我是后悔药！<span class="guige">10ml*5瓶</span></div>
        <div class="instruc">我是说明我是概述我是说明我是概述我是说明我是概述我是说明我是概述我是说明我是概述我是说明我是概述</div>
    </div>
    <div class="list list-title">
        <div class="gray">配送至：北京市育荣教育园区 <a href=""><i class="icon-arrowright"></i></a> </div>
    </div>
    <div class="list list-title buy">
        <div class="goumai"><a href="">立即购买</a> </div>
        <div class="gouwuche"><a href=""><i class="icon-cart"></i>&nbsp;加购物车</a></div>
    </div>
    <div class="list list-title">
        <div class="storeinfo">
            <img src="img/head02.jpg" class="storeimg" />
            <div class="storename">
                <p class="storename_0">同城大药房</p>
                <p class="loction">距离1.3公里，在65分钟内送达</p>
            </div>
            <span class="price">￥12.8</span>

        </div>

    </div>

    <div class="list list-title shuoming">
        <ul class="line">
            <li><h3>说明书</h3></li>
            <li>
                我是内容区我是内容区我是内容区我是内容区我是内容区我是内容区我是内容区我是内容区我是内容区我是内容区我是内容区我是内容区我是内容区我是内容区我是内容区我是内容区我是内容区我是内容区
            </li>
        </ul>
    </div>
    <div style="width:100%; height:2.5rem"></div>
</article>
<menu> <a href="index.html"><i class="icon-home"></i>首页</a> <a href="member-order.html"><i class="icon-lipin"></i>疗程购</a><a href=""><i class="icon-selectmore"></i>品牌优购</a> <a href="javascript:void(0)" id="orderCart"><i class="icon-cart"><span>2</span></i>购物车</a> <a href="member.html"><i class="icon-head"></i>我的</a> </menu>
<!--弹出圈圈loading-->
<div class="spinner" style="display: none;"><i></i></div>

<!--弹出loading-->
<div class="msg-loading" style="display: none;">
    <div class="msg-box">
        <div class="msg-load">
            <p>loading<span class="dotting"></span></p>
        </div>
        <div class="msg-top"></div>
        <div class="msg-left"></div>
        <div class="msg-right"></div>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/swipe-min.js"></script>
<script type="text/javascript" src="js/common.js"></script>

<script type="text/javascript" src="js/swiper.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        zoom:true,
        pagination: '.swiper-pagination',
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: 2500,
        //paginationClickable: true,
        //nextButton: '.swiper-button-next',
        //prevButton: '.swiper-button-prev',
        spaceBetween: 30,
        //autoplayDisableOnInteraction:false
    });
</script>